<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            type="daterange"
            range-separator="至"
            start-placeholder="培训开始日期"
            end-placeholder="培训结束日期"
            @change="onDateTime"
            :clearable="false"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-input
            maxlength="50"
            v-model="query.wasteName"
            clearable
            placeholder="请输入废弃物名称"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.taskStatus"
            placeholder="请选择处置状态"
            clearable
          >
            <el-option
              v-for="(item, index) in [
                { text: '处置状态', value: '' },
                { text: '未处置', value: '0' },
                { text: '已处置', value: '1' },
                { text: '不需处置', value: '2' },
              ]"
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            @click="
              query.page = 1;
              getList();
            "
            >查询</el-button
          >
        </el-col>
        <el-col :span="2">
          <calendar classify="4" @view="view" name="废弃物处理日历"></calendar>
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="taskDate" label="任务日期">
          <template slot-scope="scope">
            {{ scope.row.taskDate }}({{ scope.row.taskWeek }})
          </template>
        </el-table-column>
        <el-table-column prop="wasteName" label="废弃物处置名称">
        </el-table-column>
        <el-table-column prop="wasteCnt" label="处置数量">
              <template slot-scope="scope">
            <div>{{scope.row.wasteCnt}}{{scope.row.wasteCntCompany}}</div>
        
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="收购人或处置人">
        </el-table-column>
        <el-table-column prop="auditorName" label="审核人"> </el-table-column>
        <el-table-column label="处置状态">
          <template slot-scope="scope">
            <div v-if="scope.row.taskStatus == 0">暂未处置</div>
            <div v-else-if="scope.row.taskStatus == 1">已处置</div>
            <div v-else>未处置原因:{{ scope.row.completeExplain }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.taskStatus == 1"
              @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看废弃物记录"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="处置时间">
              {{ data.handleTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间">
              {{ data.completionDate }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="废弃物处置名称">
              {{ data.wasteName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处置数量">
          {{data.wasteCnt}}{{data.wasteCntCompany}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收购人或处置人">
              {{ data.handler }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核人">
              {{ data.auditorName }}人
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处置状态">已处置</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              {{ data.remark || "--" }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import calendar from "@/views/enterprise/components/calendar";
import { QueryunitWasteHandleList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.query.startdate = this.$moment()
      .subtract(1, "month")
      .format("YYYY-MM-DD");
    this.query.enddate = this.$moment().format("YYYY-MM-DD");
    this.query.time = [
      this.$moment().subtract(1, "month").format("YYYY-MM-DD"),
      this.$moment().format("YYYY-MM-DD"),
    ];
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        enddate: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        startdate: "",
        unitId: sessionStorage.getItem("interpretation"),
        time: "",
        taskStatus: "",
        wasteName: "",
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  // 方法
  methods: {
    getList() {
      QueryunitWasteHandleList(this.query).then((res) => {
        res.data.forEach((x) => {
          for (const key in x) {
            if (!x[key]) {
              x[key] = "--";
            }
          }
        });
        this.total = res.totalCount;
        this.tableData = res.data;
      });
    },
    view(e) {
      this.data = e;
      this.dialogVisible = true;
    },
    onDateTime(e) {
      if (e) {
        this.query.startdate = e[0];
        this.query.enddate = e[1];
      } else {
        this.query.startdate = "";
        this.query.enddate = "";
      }
    },
    tableRowClassName(e) {
      if (e.row.taskWeek == "星期日" || e.row.taskWeek == "星期六") {
        return "warning-row";
      } else {
        return "";
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: { calendar },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  /deep/ .el-date-editor {
    width: 100% !important;
  }
  /deep/ .el-image {
    margin-right: 10px;
  }
  /deep/ .el-table .warning-row {
    background: oldlace;
  }
}
</style>